<template>
	<view class="content my-store">
		<view class="" ref="myStore">
			<view class="my-store-t">
				<view class="mst-top">
					<image :src="store_banner_src" mode="widthFix"></image>
				</view>
				<view class="mst-bot">
					<view class='member-grid'>
						<view class='member-item'>
							<image class='member-item-img' :src='store_logo_src'></image>
						</view>
						<view class='member-item'>
							<view class="color-o fsz36">{{total_goods}}</view>
							<text class='member-item-text'>全部宝贝</text>
						</view>
						<view class='member-item' @click="openPopup()">
							<image class='member-item-icon' src='/static/image/ic-me-collect.png'></image>
							<text class='member-item-text'>收藏本店</text>
						</view>
						<view class='member-item'>
							<!-- #ifdef MP-WEIXIN -->
							<button class='share btn' open-type="share">
								<image class='member-item-icon' src='/static/image/qr_code.png'></image>
								<text class='member-item-text'>二维码</text>
							</button>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<button class='share btn' @click="createPoster()">
								<image class='member-item-icon' src='/static/image/qr_code.png'></image>
								<text class='member-item-text'>二维码</text>
							</button>
							<!-- #endif -->

						</view>
					</view>
				</view>
			</view>
			<view class="my-store-m">
				<view class="search">
					<view class="search-c" @click="goSearch">
						<view class="search-input search-input-p">
							<view class="search-input-p-c">
								{{ searchKey }}
							</view>
						</view>
						<image class="icon search-icon" src="/static/image/zoom.png"></image>
					</view>
				</view>
			</view>
			<!-- 收藏弹出窗 -->
			<lvv-popup position="bottom" ref="lvvpopref" @click="closePopup()">
				<view class="collect-pop" @click="closePopup()">
					<image v-if="isWeixinBrowser" src="/static/image/wxh5.png" mode="widthFix"></image>
					<!-- #ifdef MP-WEIXIN -->
					<image src="/static/image/wxxcx.png" mode="widthFix"></image>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="h5-tip color-f fsz38">
						<view>请将此页面添加浏览器书签</view>
						<view>方便下次浏览</view>
					</view>
					<!-- #endif -->
				</view>
			</lvv-popup>
		</view>
		<!-- 商品列表 -->
		<view class="img-grids">
			<view v-if="goodsList.length>0">
				<view class="img-grids-item" v-for="(item, index) in goodsList" :key="index" @click="goodsDetail(item.id)">
					<image class="img-grids-item-t have-none" :src="item.image_url" mode='aspectFill'></image>
					<view class="img-grids-item-b">
						<view class="goods-name grids-goods-name">
							{{item.name}}
						</view>
						<view class="goods-item-c">
							<view class="goods-price red-price">￥{{item.price}}</view>
							<image class="goods-cart" src="../../static/image/ic-car.png"></image>
						</view>
					</view>
				</view>

			</view>
			<!-- 无数据时默认显示 -->
			<view class="order-none" v-else>
				<image class="order-none-img" src="../../static/image/order.png" mode=""></image>
			</view>

		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

	import lvvPopup from '@/components/lvv-popup/lvv-popup.vue';
	import {
		apiBaseUrl
	} from '@/config/config.js'
	export default {
		components: {
			lvvPopup,
			uniLoadMore
		},
		data() {
			return {
				goodsList: [],
				loadStatus: 'more',
				orderItems: [{
						name: '全部宝贝',
						nums: '115'
					},
					{
						name: '收藏本店',
						icon: '/static/image/ic-me-collect.png',
					},
					{
						name: '二维码',
						icon: '/static/image/qr_code.png',
					}
				],
				storeCode: '',
				store_name: '', //店铺名称
				store_logo: '',
				store_logo_src: '',
				store_banner: '',
				store_desc: '', //店铺介绍
				store_banner_src: '',
				isWeixinBrowser: this.$common.isWeiXinBrowser(), //判断是否是微信浏览器
				total_goods: 0,
				myShareCode: '', //邀请码
				page: 1, //默认页码
				searchKey: '请输入关键字搜索'
			}
		},
		onShow: function() {
			if (this.$store.state.config.distribution_store == '2') {
				//跳转到首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		//加载执行
		onLoad: function(options) {
			let store = options.store;
			this.storeCode = store;
			this.getDistribution(store);
			this.getGoods();
			this.getMyShareCode()
		},
		mounted() {
			// #ifdef H5 || APP-PLUS
			window.addEventListener('scroll', this.handleScroll)
			// #endif
		},
		updated() {
			// #ifndef MP-WEIXIN
			// 获取上半部分的整体高度
			this.$nextTick(() => {
				let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
				this.top_height = this.$refs.myStore.$el.clientHeight;
			})
			// #endif
		},
		methods: {
			// 显示modal弹出框
			openPopup() {
				this.$refs.lvvpopref.show();
			},
			// 关闭modal弹出框
			closePopup() {
				this.$refs.lvvpopref.close();
			},
			//去搜索
			goSearch() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				// #ifdef H5 || MP-WEIXIN
				if (prevPage && prevPage.route) {
					let search_flag = prevPage.route;
					if (search_flag == 'pages/index/search') {
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.$common.navigateTo('/pages/index/search');
					}
				} else {
					this.$common.navigateTo('/pages/index/search');
				}
				// #endif

				// #ifdef MP-ALIPAY
				if (prevPage && prevPage.__proto__.route) {
					let search_flag = prevPage.__proto__.route;
					if (search_flag == 'pages/index/search') {
						uni.navigateBack({
							delta: 1
						});
					} else {
						this.$common.navigateTo('/pages/index/search');
					}
				} else {
					this.$common.navigateTo('/pages/index/search');
				}
				// #endif
			},
			//跳转到商品详情页面
			goodsDetail: function(id) {
				let url = '/pages/goods/index/index?id=' + id;
				this.$common.navigateTo(url);
			},
			//取得商品数据
			getGoods: function() {
				let data = {
					page: this.page,
					limit: 10
				}
				this.loadStatus = 'loading'
				this.$api.goodsList(data, res => {
					if (res.status) {
						if (this.page >= res.data.total_page) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page++
						}
						this.goodsList = [...this.goodsList, ...res.data.list]
					} else {
						this.$common.errorToShow(res.msg)
					}
				});
			},
			//获取分销商信息
			getDistribution: function(store) {
				let _this = this;
				_this.$api.getStoreInfo({
					store: store
				}, function(res) {
					if (res.status) {
						_this.store_name = res.data.store_name;
						_this.store_desc = res.data.store_desc;
						_this.store_logo_src = res.data.store_logo_src;
						_this.store_logo = res.data.store_logo;
						_this.store_banner_src = res.data.store_banner_src;
						_this.total_goods = res.data.total_goods;
						uni.setNavigationBarTitle({
							title: _this.store_name
						});
					} else {
						//报错了
						_this.$common.errorToShow(res.msg);
					}
				});
			},
			// 生成邀请海报
			createPoster() {
				let data = {
					type: 4,
					id: this.storeCode
				}

				let pages = getCurrentPages()
				let page = pages[pages.length - 1]
				let page_path = '/pages/share/jump';
				// #ifdef H5
				data.source = 1;
				data.return_url = apiBaseUrl + 'wap/' + page_path;
				// #endif

				// #ifdef MP-WEIXIN
				data.source = 2;
				data.return_url = page_path;
				// #endif

				// #ifdef MP-ALIPAY
				data.source = 3;
				data.return_url = page_path;
				// #endif

				let userToken = this.$db.get('userToken')

				if (userToken) {
					data.token = userToken
				}
				this.$api.createPoster(data, res => {
					if (res.status) {
						this.$common.navigateTo('/pages/share?poster=' + res.data)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			getMyShareCode() {
				let userToken = this.$db.get("userToken");
				if (userToken && userToken != '') {
					// 获取我的分享码
					this.$api.shareCode({}, res => {
						if (res.status) {
							this.myShareCode = res.data ? res.data : '';
						}
					});
				}
			}
		},
		//上拉加载
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.getGoods();
			}
		},
		//分享
		onShareAppMessage() {
			let myInviteCode = this.myShareCode ? this.myShareCode : '';
			let ins = this.$common.shareParameterDecode('type=9&invite=' + myInviteCode + "&id=" + this.storeCode);
			let path = '/pages/share/jump?scene=' + ins;
			return {
				title: this.$store.state.config.share_title,
				// #ifdef MP-ALIPAY
				desc: this.$store.state.config.share_desc,
				// #endif
				imageUrl: this.$store.state.config.share_image,
				path: path
			}
		}

	}
</script>

<style>
	.mst-top {
		width: 100%;
	}

	.mst-top image {
		width: 100%;
	}

	.member-grid {
		border-top: 2upx solid #ddd;
		background-color: #fff;
		margin-bottom: 20upx;
	}

	.member-item {
		border-right: 2upx solid #eee;
		height: 90upx;
	}

	.member-item:last-child {
		border-right: none;
	}

	.member-item-img {
		width: 150upx;
		height: 150upx;
		top: -70upx;
		position: absolute;
		left: 42%;
		transform: translateX(-50%);
		border-radius: 10upx;
		background-color: #fff;
		border-radius: 6upx;
		box-shadow: 0 0 10upx #ccc;
	}

	.img-grids {
		padding-bottom: 26upx;
	}

	.img-grids-item {
		margin-bottom: 0;
	}

	.scroll-Y {
		/*  #ifdef  H5  */
		height: calc(100vh - 44px - 0upx);
		/*  #endif  */
		/*  #ifndef H5 */
		height: calc(100vh - 0upx);
		/*  #endif  */
		position: position;
		/* bottom: 0; */
		/* 	padding-bottom:200upx */

	}

	.collect-pop {
		width: 100%;
		height: 100%;
		/* background: #FFFFFF; */
		position: absolute;
		left: 0;
		bottom: 0;
		/* transform: ; */
	}

	.collect-pop image {
		width: 100%;
	}

	.h5-tip {
		text-align: center;
		margin-top: 300upx;
	}

	.member-item .share {
		background: none !important;
		line-height: normal;
	}
</style>
